<template>
	<div class="container">
		<Breadcrumb :items="['menu.sys', 'menu.sys.admin']" />
		<a-card :title="$t('menu.sys.admin')">
			<a-space direction="vertical" fill>
				<a-row>
					<a-col :flex="1">
						<a-button type="primary" shape="round" @click="handleAdd">
							<icon-plus />
							添加管理员
						</a-button>
					</a-col>
				</a-row>

				<a-table :data="renderData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
					@page-change="onPageChange" @page-size-change="onPageSizeChange">
					<template #columns>
						<a-table-column title="ID" data-index="id" :width="80" />
						<a-table-column title="用户名" data-index="username" />
						<a-table-column title="状态" data-index="status" :width="120">
							<template #cell="{ record }">
								<a-tag :color="record.status === 1 ? 'green' : 'red'">{{ record.status === 1 ? '正常' :
									'禁用' }}</a-tag>
							</template>
						</a-table-column>
						<a-table-column title="创建时间" data-index="created_at" :width="180" />
						<a-table-column title="操作" align="center" :width="100">
							<template #cell="{ record }">
								<a-space>
									<a-link @click="handleEdit(record)">
										<icon-edit />
									</a-link>
								</a-space>
							</template>
						</a-table-column>
					</template>
				</a-table>
			</a-space>

		</a-card>

		<a-modal v-model:visible="adminVisible" width="550px" :title="adminForm.id ? '编辑管理员' : '添加管理员'"
			@before-ok="handleAdminSubmit" :draggable="true" @cancel="cancelAdminForm">
			<a-form :model="adminForm" layout="vertical">
				<a-form-item field="username" label="用户名">
					<a-input v-model="adminForm.username" placeholder="请输入用户名" />
				</a-form-item>
				<a-form-item field="password" label="密码">
					<a-input-password v-model="adminForm.password" placeholder="请输入密码" />
				</a-form-item>
				<a-form-item field="status" label="状态">
					<a-select v-model="adminForm.status" placeholder="请选择状态">
						<a-option value="1">正常</a-option>
						<a-option value="0">禁用</a-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { getAdminList, AdminListParams, AdminListItem, submitForm } from '@/api/user';

const { loading, setLoading } = useLoading(true);



const basePagination: Pagination = {
	showTotal: true,
	showPageSize: true,
	current: 1,
	pageSize: 10
};

const pagination = reactive({
	...basePagination,
});

const onPageChange = (current: number) => {
	fetchData({ ...pagination, current });
};

const onPageSizeChange = (pageSize: number) => {
	fetchData({ ...pagination, pageSize });
};

const renderData = ref<AdminListItem[]>([]);
const fetchData = async (params: AdminListParams = { current: 1, pageSize: 10 }) => {
	setLoading(true);
	try {
		pagination.current = params.current;
		pagination.pageSize = params.pageSize;

		const { data } = await getAdminList(params);
		renderData.value = data.list;
		pagination.total = data.total;
	} catch (err) {
		// you can report use errorHandler or other
	} finally {
		setLoading(false);
	}
};

fetchData();

/**
 * 添加和编辑管理员
 */
const adminVisible = ref(false);
const adminForm = ref({
	username: '',
	password: '',
	status: '1',
});


const handleAdd = () => {
	adminVisible.value = true;
};

const handleEdit = (record: AdminListItem) => {
	adminVisible.value = true;
};

const handleAdminSubmit = async (done: any) => {
	setLoading(true);
	try {
		await submitForm(adminForm.value).then((res) => {
			Message.success(res.msg || '操作成功');
			cancelAdminForm();
			fetchData();
			done(true);
		});
	} catch (err) {
		done(false)
		// you can report use errorHandler or other
	} finally {
		setLoading(false);
	}
};

const cancelAdminForm = () => {
	adminVisible.value = false;
};

</script>

<script lang="ts">
export default {
	name: 'SysAdmin',
};
</script>

<style scoped lang="less">
.container {
	padding: 0 20px 20px 20px;
}
</style>
